let form = layui.form;
// 定义查询参数 
const query = {
    pagenum: 1, // 是	int	页码值
    pagesize: 2, // 是	int	每页显示多少条数据
    cate_id: "", // "" 所有的文章分类 否	string	文章分类的 Id
    state: "", // "" 所有状态 文章状态  可选值有：已发布、草稿
};

// 文章列表数据
getArtList()
function getArtList() {
    axios.get('/my/article/list', { params: query }).then(({ data: { data, total } }) => {
        let newArr = data.map(
            ({ title, cate_name, pub_date, state, Id }) => `
            <tr>
                <td>${title}</td>
                <td>${cate_name}</td>
                <td>${pub_date}</td>
                <td>${state}</td>
                <td>
                    <button type="button" data-id="${Id}" class="layui-btn layui-btn-xs btn_edit">编辑</button>
                    <button type="button" data-id="${Id}" class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
                </td>
            </tr>
        `
        ).join('')
        // console.log(newArr);
        $('#list').html(newArr)
        // 处理分页
        renderPage(total)
    })
}

// 获取分类类别 列表数据，填充到分类的下拉框中
axios.get("/my/article/cates").then((res) => {
    let newArr = res.data.data.map((item) => {
        // 需要把option的value设置好值 value设置成对应的Id值
        return `<option value="${item.Id}">${item.name}</option>`
    })
    // 把option内容放到下拉框中，html()方法可以使用，但是在这里使用的话，会把原来的覆盖，用append()方法进行添加
    // $('#cateSelect').append(newArr.join(''))

    // 使用html要这样写
    $('#cateSelect').html(` <option value="">所有分类</option>` + newArr.join(''))

    // 当option创建添加到下拉框之后，手动更新form表单全部内容
    form.render();
})

// 筛选
$("#form").on("submit", function (e) {
    e.preventDefault();

    // 在发送请求之前，还需要修改下query查询参数里面的cate_id 以及 state 值
    query.cate_id = $("#cateSelect").val();
    query.state = $("#stateSelect").val();

    // 筛选的时候，筛选出第一页的数据来查看(解决小bug)
    query.pagenum = 1;

    // 发送请求
    getArtList();
});

// 分页函数 => 调用位置有讲究（需要在获取列表数据的时候）
// count 总条数
let laypage = layui.laypage;
function renderPage(count) {
    // 执行一个laypage实例
    laypage.render({
        elem: 'page-box', // 这里的 page-box 是 ID，不用加 # 号
        count, // 数据总数，从服务端得到
        curr: query.pagenum, // 起始页
        limit: query.pagesize, // 每页条数
        layout: ["count", "limit", "prev", "page", "next", "skip"],//自定义分页效果
        limits: [1, 2, 3, 5, 8, 10],//自定义每页多少条数据
        jump: function (obj, first) {
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            // 点击分页，需要加载对应分页的数据
            // 1. 修改query对象的pagenum页码值为当前页
            // 2. 发送ajax请求获取到数据

            // 1.
            query.pagenum = obj.curr;

            // 修改pagesize的值(每页显示的条数)
            query.pagesize = obj.limit;

            // 发送ajax请求获取数据
            // getList();

            // 首次（初始化渲染分页的时候）不执行
            if (!first) {
                // 点击分页才执行
                getArtList();
            }
        }
    });
}

// 删除
$('#list').on('click', '.btn_delete', function () {
    let id = $(this).attr('data-id')
    layer.confirm(
        '确定要删除此文章吗？',
        { icon: 3, title: '提示' },
        function (index) {
            // 点击确认按钮,来发送ajax请求实现删除文章
            axios.get("/my/article/delete/" + id).then((res) => {
                if (res.data.status !== 0) {
                    return layer.msg("删除文章失败");
                }

                // 删除文章成功
                layer.msg("删除文章成功");

                // 当前页面中，如果只有一个删除按钮了，页码 - 1，使其展示上一页数据
                // 解决小bug
                if ($(".btn_delete").length === 1) {
                    // 页码最小值为1
                    query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1;
                }

                // 发送ajax获取最新的数据
                getArtList();
                layer.close(index);
            });
        });
});

// 点击编辑，跳转页面
$('#list').on('click', '.btn_edit', function () {
    // 获取到编辑按钮上的id
    let id = $(this).attr('data-id')
    location.href = '/article/art_edit.html?id=' + id
});